<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>insert title here</title>
</h:head>
<h:body>
	<ui:composition template="/templates/khungchinhkhachhang.xhtml">
		<ui:define name="tieudetrang">
            Mua Hàng Online
         </ui:define>
		<ui:define name="javascrip">
			<h:outputScript library="javascrip" name="muahang.js" />
		</ui:define>
		<ui:define name="phandau">
			<div class="daude">LapTop Online</div>
		</ui:define>
		<ui:define name="menungang">
			<h:form id="form1">
			<p:tabMenu activeIndex="0">  
    		<p:menuitem value="Trang Chủ" url="#" styleClass="menuitem" icon="ui-icon-home"/>  
    		<p:menuitem value="Giỏ Hàng" action="#{beanBanHang.giohang}" styleClass="menuitem" icon="ui-icon-cart" disabled="#{empty beanBanHang.giohang}"/>
    		<p:menuitem value="Đăng Ký Thành Viên" url="#" styleClass="menuitem" icon="ui-icon-person"/>
    		<p:menuitem value="Trợ Giúp" url="#" styleClass="menuitem" icon="ui-icon-wrench"/>
			</p:tabMenu>
			</h:form>
		</ui:define>
		<ui:define name="noidung">
			<div id="menu">
			<h:form>
				<p:menu model="#{beanBanHang.model}" styleClass="menu">
				</p:menu>
			</h:form>
			</div>
			<h:form id="form">
			<div id="dsspkhachhang">
			
					<p:dataList value="#{beanBanHang.dssp}" var="sanpham"
						id="listsanpham" paginator="true" rows="16" effectSpeed="fast"
						paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
					 type="none">

					<f:facet name="header">  
                #{beanBanHang.tieude}  
            		</f:facet>
						
							<p:graphicImage id="image" styleClass="hinhsanphammoi"
								value="/resources/images/hinhsanpham/#{sanpham.hinh}" />
						
						
						<p:draggable for="image" revert="true" helper="clone"
                        handle=".ui-panel-titlebar" stack=".ui-panel"/>
						
						<p:tooltip for="image" styleClass="tooltip" showEffect="slide"
							hideEffect="slide">
							<h:panelGrid columns="2">
							<h:panelGroup>
								<h:outputText value="#{msgs.tenSP}" style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.ten}" style="font-weight: bold;">
								</h:outputText>
							</h:panelGroup>
							<h:outputText value=" "></h:outputText>
							
							<h:panelGroup>
								<h:outputText value="#{msgs.Gia}" style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.gia}">
									<f:convertNumber pattern="###,###,### VND"></f:convertNumber>
								</h:outputText>
							</h:panelGroup>
							<h:outputText value=""></h:outputText>
							
							<h:panelGroup>
								<h:outputText value="Hãng: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.nhasanxuat.tennhasanxuat}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Bảo Hành: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.baoHanh}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="CPU: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.cpu}"></h:outputText>
							</h:panelGroup>
								
							<h:panelGroup>
								<h:outputText value="HDD: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.hdd}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Màn Hình: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.manHinh}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Đồ Họa: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.doHoa}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Ổ Đĩa: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.oDia}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Wifi: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.wifi}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Webcam: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.webcam}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Pin: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.pin}"></h:outputText>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputText value="Hệ điều hành: " style="font-weight: bold;"></h:outputText>
								<h:outputText value="#{sanpham.hdh}"></h:outputText>
							</h:panelGroup>
							<h:outputText value=""></h:outputText>
							
								<h:outputText value="Khuyến Mãi: " style="font-weight: bold; color: red; "></h:outputText>
								<h:outputText escape="false" value="#{sanpham.khuyenMai}"></h:outputText>
							
							
							</h:panelGrid>
						</p:tooltip>
					</p:dataList>
				
			</div>
		<div id="giohang">
			<p:fieldset id="sanphams" legend="Giỏ Hàng Của Bạn" style="margin-top:20px; font-size:14px;">  
  
        	<p:outputPanel id="dropArea">  
  
            <h:outputText value="Kéo Thả Vào Đây"  
                    rendered="#{empty beanBanHang.giohang}"  
                    style="font-size:24px;" />  
  
            <p:dataTable var="sanpham" value="#{beanBanHang.giohang}"  
                    rendered="#{not empty beanBanHang.giohang}">  
  
                <p:column headerText="Sản Phẩm">  
                    <h:outputText value="#{sanpham.ten}" />
                    <br />
                    
                    <h:outputText value="Số Lượng: "></h:outputText>
                    <h:outputText value="#{sanpham.soLuong}" rendered="#{!beanBanHang.sanphamsua(sanpham)}"/>
                    <p:inputText value="#{sanpham.soLuong}" rendered="#{beanBanHang.sanphamsua(sanpham)}" onkeypress="return digitonly(event)" maxlength="2">
                    <p:ajax listener="#{beanBanHang.suasanpham()}" event="keyup" update="thanhtien tongtien"></p:ajax>
                    </p:inputText>
                    <br />
                    
                    <h:outputText value="Thành Tiền: "></h:outputText>
                     <h:outputText id="thanhtien" value="#{beanBanHang.thanhtien(sanpham)}" >
                     <f:convertNumber pattern="###,###,###"></f:convertNumber>
                     </h:outputText>
                  	<br />
                  	
                  	<h:commandLink rendered="#{!beanBanHang.sanphamsua(sanpham)}" styleClass="buttonkhachhang" action="#{beanBanHang.suasanpham()}">
                    <p:button  value="Sửa">
                    </p:button>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
                    
                    <h:commandLink action="#{beanBanHang.luusanpham}" rendered="#{beanBanHang.sanphamsua(sanpham)}" styleClass="buttonkhachhang">
                    <p:commandButton  value="Lưu"></p:commandButton>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
                    
                    <h:commandLink styleClass="buttonkhachhang" action="#{beanBanHang.xoasanpham}">
                    <p:commandButton value="Xóa"></p:commandButton>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
               </p:column>  
                <f:facet name="footer"> 
                <h:outputText value="Tổng Tiền: "></h:outputText>
                <h:outputText id="tongtien" value="#{beanBanHang.tongsotien}">
                <f:convertNumber pattern="###,###,###"></f:convertNumber>
                </h:outputText>
                <div class="buttonkhachhang">
                <h:commandLink action="#{beanBanHang.lammoi}">
                	<p:button value="Làm Mới">
                	</p:button>
                </h:commandLink>
                <h:commandLink action="#{beanBanHang.giohang}">
                	<p:button value="Thanh Toán">
                	</p:button>
                </h:commandLink>
               	</div>
       			 </f:facet> 
            </p:dataTable>  
  		
        </p:outputPanel>  
  
    </p:fieldset>
    <p:droppable for="sanphams" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="listsanpham">  
    <p:ajax listener="#{beanBanHang.boSanPham}" update="dropArea :form1" />
    </p:droppable>
     
    </div>
			</h:form>
		</ui:define>
	</ui:composition>

</h:body>
</html>